<!DOCTYPE html>
<html lang="en" >
<head>
    <title>{{$boy_name}}&{{$girl_name}} 结婚请帖</title>
    <meta charset="utf-8">
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" href="/favicon.png" />
    <link rel="stylesheet" type="text/css" href="/model/parent1/pure.css">
    <link rel="stylesheet" type="text/css" href="/model/parent1/main.css">
    <link rel="stylesheet" type="text/css" href="/model/parent1/swiper.3.1.7.min.css">
    <link rel="stylesheet" type="text/css" href="/model/parent1/animate.min.css">
    <link rel="stylesheet" type="text/css" href="/model/parent1/jquery-rebox.css">
</head>
<body>
<div id="main" class="swiper-container">
    <div class="swiper-wrapper">
         <div class="swiper-slide" style="background-image:url(/model/parent1/images/marriedwe.png);background-size:100% 100%;">
            <h2 class="title" style="margin-top:58px;">诚挚的邀请</h2> 
            
            <p style="position:absolute;top:65%;left:0;padding:0 10px;font-size:20px;font-weight:600;line-height:40px;">
                {{$invit_letter}}
            </p>
     
        </div>

        <div class="swiper-slide">
            <img id="main_bg" src="/model/parent1/images/main.png" />

            <img id="header" src="{{$head_dir}}"  class='ani' swiper-animate-effect="fadeInUp" swiper-animate-duration="2s" swiper-animate-delay="0.3s">
                
            <p >
                  <b class='name'>{{$boy_name}}</b>
                  <b class='name'>{{$girl_name}}</b>
            </p>
            <div style="text-align:left;position: absolute;bottom:20px;padding-left:20%;">
            <p >距婚礼 <?php echo floor( (strtotime($wedding_time)-time() )/(3600*24) ) ?> 天</p>
            <p ><?php echo date("Y年m月d日 H时i分",strtotime($wedding_time)) ?></p>
            </div>
        </div>
        


        <div class="swiper-slide">
            <h2 class='title'>婚纱照</h2> 
            <div id='image_box' style="margin-top:-40px;">
                <img src="/model/parent1/images/album_t.png" width="80%" style="position:relative;top:30px;" />
                <div class="swiper-wrapper">
                    @foreach ($pictures as $picture)
                    <div class="image_box swiper-slide">
                         <a href="{{$picture->dir}}"><img src="{{$picture->dir}}" /></a>
                    </div>
                    @endforeach
                </div>
                <div class="swiper-button-prev"></div>
                <div class="swiper-button-next"></div>

                <img src="/model/parent1/images/album_l.png" width="15%" style="position:absolute;top:172px;left:5px;" />
                <img src="/model/parent1/images/album_r.png" width="15%" style="position:absolute;top:172px;right:5px;" />
                <img src="/model/parent1/images/album_b.png" width="80%" style="position:relative;top:-85px;" />
            </div>
        </div>

        @if ($video_dir != "")
        <div class="swiper-slide" style="background-image:url(/model/parent1/images/video.png);background-size:100% 100%;">
            <h2 class='title'>视频VCR</h2> 
            <div id='video_box' style="position:absolute;top:50%;margin-top:-80px;width:80%;left:10%;">
                <video id="video" width="100%;" style="border:2px solid #f33;" controls="controls">
                  <source src="{{$video_dir}}" >
                </video>
            </div>
        </div>
        @endif
        <div class="swiper-slide">
            <h2 class='title'>参加婚礼</h2> 
            <p>
                <?php echo date("Y年m月d日 H时i分",strtotime($wedding_time)) ?>
            </p>
            <p>
                {{$wedding_address}}
            </p>
            <p>
                {{$traffic_way}}
            </p>
            <p>
                <a href="tel:{{$boy_tel}}" class='pure-button pure-button-primary'>喜事电话</a>
                <!--
                <a href="tel:{{$girl_tel}}" class='pure-button pure-button-primary'>新娘电话</a>
                -->
            </p>
            <a href="http://m.amap.com/share/index/__q={{$map_dir}}&lnglat={{$map_dir}}&name=婚礼地点">
                <img id="map" src="http://restapi.amap.com/v3/staticmap?scale=2&location={{$map_dir}}&zoom=12&size=220*160&markers=mid,,A:{{$map_dir}}&key=ee95e52bf08006f63fd29bcfbcf21df0" />
            </a>
        </div>


        <div class="swiper-slide" >
            <h2 class='title'>祝福他们</h2>
            <div id="reply_box" class="pure-form pure-form-stacked" >
                
                <input class='' type="text" placeholder="您的姓名" name="name" id="rp_name">
                <input class='' type="tel" placeholder="您的手机号码" name="phone" id="rp_phone">
                <textarea class='' placeholder="您的祝福" name="content" id="rp_content"></textarea>
                <input class="" type="number" placeholder="出席人数" name="number" id="rp_number"><br/>
                
                <button class="pure-button pure-button-primary" type="submit" style="color:#fff;" id="rp_submit" >送出祝福</button>
           
            </div>
            <div style="width:100%;margin-left:-30px;color:#fff;font-size:14px;position:absolute;bottom:0;padding-bottom:10px;">
                <P > 中华爱情网祝天下有情人终成眷属 </P>
                <a href="http://chinalove99.net">chinalove99.net</a>
            </div>
        </div>

    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>
            
    <!-- 如果需要导航按钮
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
     -->
    <!-- 如果需要滚动条 
    <div class="swiper-scrollbar"></div>
    -->
    <label id="audio_box" class="on" >
        <audio id="audio" autoplay="autoplay" loop="loop">
            <source src="{{$music_dir}}" type="audio/mpeg">
        </audio>
    </label>
</div>
</body>
    <script type="text/javascript" src="/model/parent1/zepto.min.js"></script></body>
	<script type="text/javascript" src="/model/parent1/swiper.3.1.7.jquery.min.js"></script>
    <script type="text/javascript" src="/model/parent1/swiper.animate1.0.2.min.js"></script>
    <script type="text/javascript" src="/model/parent1/jquery-litelighter.js"></script>
    <script type="text/javascript" src="/model/parent1/jquery-rebox.js"></script>
    <script type="text/javascript">
        //swiper
        var mySwiper = new Swiper ('.swiper-container', {
            direction: 'vertical',

            // 如果需要分页器
            pagination: '.swiper-pagination',
            
            // 如果需要前进后退按钮
            //nextButton: '.swiper-button-next',
            //prevButton: '.swiper-button-prev',
            
            // 如果需要滚动条
            //scrollbar: '.swiper-scrollbar',
   
            onInit: function(swiper){ //Swiper2.x的初始化是onFirstInit
                swiperAnimateCache(swiper); //隐藏动画元素 
                swiperAnimate(swiper); //初始化完成开始动画
            }, 
            onSlideChangeEnd: function(swiper){ 
                swiperAnimate(swiper); //每个slide切换结束时也运行当前slide动画
            } 
        });

        var mySwiper = new Swiper ('#image_box', {
         
            nextButton: '.swiper-button-next',
            prevButton: '.swiper-button-prev',
        });

        //相册
        $('#image_box').rebox({ selector: 'a' ,prev: '&larr;',next: '&rarr;'});

        //音乐
        var audio = $('#audio_box audio').get(0);
        $("#audio_box").click(function(){
            $(this).hasClass("on")
            if ($(this).hasClass('on')){
                $(this).attr('class','off');
                audio.pause();
            }else{
                $(this).attr('class','on');
                audio.play();
            }
        });

        document.addEventListener('touchstart', function(){ 
            if ($("#audio_box").hasClass('on'))
                audio.play();
        }, false);

        // 在线祝福
        $("#rp_submit").click(function(){
            var name    = $("#rp_name").val();
            var phone   = $("#rp_phone").val();
            var content = $("#rp_content").val();
            var number  = $("#rp_number").val();
            console.log(name);
 
            if(name == ""){
                return false;
            }
            $.ajax({  
                type: 'POST',
                data: {"name":name,"phone":phone,"content":content,"number":number},
                url: '/api/invitation/{{$id}}/bless',  
                success: function(data){  
                    if (!data.error) {
                        alert("感谢您的祝福！");
                        
                        $("#rp_name").val('');
                        $("#rp_phone").val('');
                        $("#rp_content").val('');
                        $("#rp_number").val('');
                    }else{
                        alert(data.message);
                    }
                },
                error: function(data){  
                    alert("祝福提交失败！");
                }  
            });
            return false;   
        });
    </script>
</html>